<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>jQuery EJS</title>
    <link rel="stylesheet" type="text/css" href="index.css">
</head>

<body>
    <div class="top">
        <h2>你还在用 html += ？</h2>
        <pre>
<code><key>var</key> <name>html</name> = '<value>&lt;li&gt;</value>';</code>
<code><name>html</name> += '<value>xxx</value>';</code>
<code><name>html</name> += '<value>yyy</value>';</code>
<code><name>html</name> += '<value>&lt;/li&gt;</value>';</code>
<code><key>$</key>('<value>#container</value>').html(html);</code>
        </pre>
        <h1>OUT了，快使用jQueryEJS吧！</h1>
    </div>
    <div class="main">
        <div class="block">
            <h2>——$ 开始 $——</h2>
            <h3>导入</h3>
            <p>引入jQuery，引入jQueryEJS</p>
            <pre>
<code>&lt;<tag>script</tag> <name>src</name>="<value>https://liuzy88.com/jqejs/jquery.min.js</value>"&gt;&lt;/<tag>script</tag>&gt;</code>
<code>&lt;<tag>script</tag> <name>src</name>="<value>https://liuzy88.com/jqejs/jquery.ejs.js</value>"&gt;&lt;/<tag>script</tag>&gt;</code>
            </pre>
            <h3>使用</h3>
            <p>写ejs模板</p>
            <pre>
<code>&lt;<tag>ejs</tag> <name>data-id</name>="<value>dataTemplate</value>"&gt;</code>
<code>    &lt;% <key>var</key> total=0; for (<key>var</key> i=0; i&lt;data.goodsList.length; i++) { total+=data.goodsList[i].price; %&gt;</code>
<code>    &lt;<tag>li</tag>&gt;</code>
<code>        &lt;<tag>span</tag>&gt;&lt;%= data.goodsList[i].id %&gt;&lt;/<tag>span</tag>&gt;</code>
<code>        &lt;<tag>span</tag>&gt;&lt;%= data.goodsList[i].name %&gt;&lt;/<tag>span</tag>&gt;</code>
<code>        &lt;<tag>span</tag>&gt;&lt;%= data.goodsList[i].price %&gt;元&lt;/<tag>span</tag>&gt;</code>
<code>        &lt;<tag>span</tag>&gt;&lt;%= EJS.localDate(data.goodsList[i].time) %&gt;&lt;/<tag>span</tag>&gt;</code>
<code>    &lt;/<tag>li</tag>&gt;</code>
<code>    &lt;% } %&gt;</code>
<code>    &lt;<tag>li</tag>&gt;共&lt;%= data.goodsCount %&gt;个，一共&lt;%= total %&gt;元&lt;/<tag>li</tag>&gt;</code>
<code>&lt;/<tag>ejs</tag>&gt;</code>
            </pre>
            <p>编译模板</p>
            <pre>
<code><key>$</key>.ejs();</code>
            </pre>
            <p>容器</p>
            <pre>
<code>&lt;<tag>ul</tag> <name>id</name>="<value>dataContainer</value>"&gt;</code>
<code>&lt;/<tag>ul</tag>&gt;</code>
            </pre>
            <p>渲染数据</p>
            <pre>
<code><key>var</key> json = {goodsCount: 3, goodsList: [{id: "1", name: "白萝卜", price: 5.4, time: 1471534991878 }, {id: "2", name: "花生", price: 7.25, time: 1471534991878 }, {id: "3", name: "花菜", price: 4.85, time: 1471534991878 }] };</code>
<code><key>$</key>('<value>#dataContainer</value>').ejs('<value>dataTemplate</value>', {data: json });</code>
            </pre>
            <p><span style="margin-right: 30px;">效果</span> <a href="./example.html" target="_blank">查看示例</a></p>
            <pre>
<code>&lt;<tag>ul</tag> <name>id</name>="<value>dataContainer</value>"&gt;</code>
<code>    &lt;<tag>li</tag>&gt;</code>
<code>        &lt;<tag>span</tag>&gt;1&gt;&lt;/<tag>span</tag>&gt;</code>
<code>        &lt;<tag>span</tag>&gt;白萝卜&gt;&lt;/<tag>span</tag>&gt;</code>
<code>        &lt;<tag>span</tag>&gt;5.4元&gt;&lt;/<tag>span</tag>&gt;</code>
<code>        &lt;<tag>span</tag>&gt;2016-08-18 23:43:11&gt;&lt;/<tag>span</tag>&gt;</code>
<code>    &lt;/<tag>li</tag>&gt;</code>
<code>    &lt;<tag>li</tag>&gt;</code>
<code>        &lt;<tag>span</tag>&gt;2&gt;&lt;/<tag>span</tag>&gt;</code>
<code>        &lt;<tag>span</tag>&gt;花生&gt;&lt;/<tag>span</tag>&gt;</code>
<code>        &lt;<tag>span</tag>&gt;7.25元&gt;&lt;/<tag>span</tag>&gt;</code>
<code>        &lt;<tag>span</tag>&gt;2016-08-18 23:43:11&gt;&lt;/<tag>span</tag>&gt;</code>
<code>    &lt;/<tag>li</tag>&gt;</code>
<code>    &lt;<tag>li</tag>&gt;</code>
<code>        &lt;<tag>span</tag>&gt;3&gt;&lt;/<tag>span</tag>&gt;</code>
<code>        &lt;<tag>span</tag>&gt;花菜&gt;&lt;/<tag>span</tag>&gt;</code>
<code>        &lt;<tag>span</tag>&gt;4.85元&gt;&lt;/<tag>span</tag>&gt;</code>
<code>        &lt;<tag>span</tag>&gt;2016-08-18 23:43:11&gt;&lt;/<tag>span</tag>&gt;</code>
<code>    &lt;/<tag>li</tag>&gt;</code>
<code>    &lt;<tag>li</tag>&gt;共3个，一共17.5元&gt;&lt;/<tag>li</tag>&gt;</code>
<code>&lt;/<tag>ul</tag>&gt;</code>
            </pre>
            <br>

            <h2>——$ 文档 $——</h2>
            <h3>编译的两种方式</h3>
            <p>自动编译</p>
            <pre>
<code><key>$</key>.ejs();</code>
            </pre>
            <p>指定编译元素</p>
            <pre>
<code><key>$</key>.ejs('<value>#templateId</value>');</code>
            </pre>
            <h3>渲染的三种方式</h3>
            <p>使用默认ID渲染(追加内容)</p>
            <pre>
<code><key>$</key>('<value>#containerId</value>').ejs({ data: jsonObj });</code>
            </pre>
            <p>指定模板ID渲染(追加内容)</p>
            <pre>
<code><key>$</key>('<value>#containerId</value>').ejs('<value>templateId</value>', { data: jsonObj });</code>
            </pre>
            <p>重新渲染</p>
            <pre>
<code><key>$</key>('<value>#containerId</value>').ejs({ data: jsonObj }, <key>true</key>);</code>
<code><key>$</key>('<value>#containerId</value>').ejs('<value>templateId</value>', { data: jsonObj }, <key>true</key>);</code>
            </pre>
            <h3>模板助手</h3>
            <p>时间转换</p>
            <pre>
<code>&lt;%= EJS.localDate(1471534991878) %&gt; <tag>=&gt;</tag> <value>2016-08-18 23:43:11</value></code>
            </pre>
            <p>扩展模板助手</p>
            <pre>
<code><key>$</key>.EJS.orderStatus = function(status) {</code>
<code>    <key>switch</key> (status) {</code>
<code>        <key>case</key> '<value>NOTPAY</value>':</code>
<code>            <key>return</key> '<value>未支付</value>';</code>
<code>        <key>case</key> '<value>USERPAYING</value>':</code>
<code>            <key>return</key> '<value>支付中</value>';</code>
<code>        <key>case</key> '<value>SUCCESS</value>':</code>
<code>            <key>return</key> '<value>支付成功</value>';</code>
<code>        <key>case</key> '<value>REFUND</value>':</code>
<code>            <key>return</key> '<value>转入退款</value>';</code>
<code>        <key>case</key> '<value>PAYERROR</value>':</code>
<code>            <key>return</key> '<value>支付失败</value>';</code>
<code>        <key>case</key> '<value>CLOSED</value>':</code>
<code>            <key>return</key> '<value>已关闭</value>';</code>
<code>        <key>default</key>:</code>
<code>            <key>return</key> '<value>未知</value>';</code>
<code>    }</code>
<code>}</code>
            </pre>
        </div>
    </div>
    <div class="foot">
        jQuery EJS © 2016 <a href="https://liuzy88.com" target="_blank">liuzy88.com</a> ::: Front Template  by <a href="mailto:416657468@qq.com" target="_blank">Liuzy</a>
    </div>
</body>

</html>
